<script setup lang="ts">
import { ObjectUtil } from '@utils/object-util'

const dotList = ref([])
const quantityValue = ref(6)
onMounted(async () => {
  // render()
  for (let i = 0; i < 500; i++) {
    add2()
    if (dotList.value.length > 100) {
      dotList.value.splice(0, 1)
    }
    await ObjectUtil.sleep(10)
  }
})

let backUpRadius = 0
function render () {
  dotList.value = []
  const quantity = quantityValue.value
  const angle = 720 / quantity
  let radius = 30
  for (let i = 0; i < quantity; i++) {
    radius += 4
    dotList.value.push({
      left: Math.sin(angle * i * Math.PI / 180) * radius + 'px',
      top: Math.cos(angle * i * Math.PI / 180) * -radius + 'px'
    })
  }
  backUpRadius = radius
}
function add () {
  backUpRadius += 1
  dotList.value.push({
    left: Math.sin(11 * dotList.value.length * Math.PI / 180) * backUpRadius + 'px',
    top: Math.cos(11 * dotList.value.length * Math.PI / 180) * -backUpRadius + 'px'
  })
}
let arcLength = -20 // 弧长
let radian1 = 0 // 弧度
let radius1 = 20 // 半径
const zengjia = 40 // 每圈增加半径
let 当前圈的半径步进 = 0
let 当前圈数 = 0
const 点直径 = 30
function add2 () {
  arcLength += 点直径
  radian1 = arcLength / radius1 * (180 / Math.PI)
  console.log(arcLength, radius1, radian1)
  dotList.value.push({
    left: Math.sin(radian1 * Math.PI / 180) * radius1 + 'px',
    top: Math.cos(radian1 * Math.PI / 180) * -radius1 + 'px'
  })
  if (~~(radian1 / 360) + 1 > 当前圈数) {
    当前圈数 = ~~(radian1 / 360) + 1
    const 周长 = (radius1 + zengjia) * 2 * Math.PI
    const 一周需要的次数 = 周长 / 点直径
    当前圈的半径步进 = zengjia / 一周需要的次数
  }
  radius1 += 当前圈的半径步进
  arcLength = radius1 * radian1 * (Math.PI / 180)
}
</script>

<template>
  <div class="wh-100 debugger-bor d-flex-center position-relative overflow-hidden">
    <div style="top:0;left:0;" class="position-absolute">
      <el-input-number v-model="quantityValue" @input="render" />
      <el-button @click="add">添加一条</el-button>
    </div>
    <div class="debugger-bor-2 position-relative" style="width: 0;height: 0;">
      <div style="width: 3000px;transform: translateX(-50%)" class="debugger-bor" />
      <div style="height: 3000px;transform: translateY(-50%)" class="debugger-bor" />
      <div
        v-for="(item, index) in dotList" :key="index" class="position-absolute d-flex-center"
        :style="item"
        style="width: 0;height: 0"
      >
        <div>
          <div class="" :style="{ width: 20 * (index / dotList.length) + 'px' }" style="aspect-ratio:1;background-color: #47B347;border-radius: 50%" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header {
  background: white;
  border-radius: 4px;
}
.rotate {
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
</style>
